<template>
	<view>
		<view class="title">{{dataSource.title}}</view>
		<checkbox-group class="content" @change="change">
			<label class="check" v-for="(item,index) in dataSource.options" :key="index">
				<checkbox class="box" :value="item.value" />
				<text class="text">{{item.name}}</text>
			</label>
		</checkbox-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			dataSource: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		methods: {
			change(e) {
				let arg = {
					type: this.dataSource.type,
					value: e.detail.value
				}
				console.log(arg.type)
				console.log(arg.value)
				this.$emit('change', arg)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 30upx;
		color: #333333;
		padding-top: 60upx;
		font-weight: 600;
	}

	.content {
		background-color: #ffffff;
		box-shadow: 0px 4px 20px 0px rgba(153, 153, 153, 0.2);
		border-radius: 8px;
		border: solid 1px #f7f7f7;
		padding: 20upx 40upx;
		margin-top: 40upx;
	}
	.check {
		font-size: 28upx;
		color: #333333;
		min-width: 50%;
		padding: 20upx 20upx 0 0;
		vertical-align: top;
		display: inline-flex;
	}
	.text{
		flex: 1;
	}
</style>
